<template>
  <div class="my-echarts" ref="mapRef"></div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from "echarts";

onMounted(() => {
  initChart()
})

const mapRef = ref()
let myChart = null
// 基于准备好的dom，初始化echarts实例
const initChart = () => {
  myChart = echarts.init(mapRef.value);

  const options = {
    title: {
      text: 'ECharts 入门示例'
    },
    tooltip: {},
    xAxis: {
      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {},
    series: [
      {
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }
    ]
  }

  // 绘制图表
  // myChart.value.setOption(options);
  myChart.setOption(options);

  resizeHandler()
}

// 响应式处理图表
const resizeHandler = () => {
  window.addEventListener('resize', () => {
    myChart.resize()
  })
}


</script>

<style scoped>
.my-echarts {
  width: 100%;
  height: 400px;
}
</style>
